<template>
    <a-tree-select v-model="groupName" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' ,paddingRight:'10px'}"
        :allow-clear='clearable' :replaceFields="replaceFields" :tree-data="treeData" @change="onChange" :placeholder="placeholder"
        style="width:100%" dropdownClassName="sheetCustom">
    </a-tree-select>
</template>

<script>
    import {
        treeList
    } from '@/api/treeController'
    export default {
        data() {
            return {
                groupName: "",
                treeData: [],
                replaceFields: {
                    children: 'child',
                    title:'label',
                    key:'id',
                    value:'id'
                }
            }
        },
        props: {
            clearable: {
                type: Boolean,
                default: true
            },
            placeholder: {
                type: String,
                default: '请选择分组'
            }
        },
        mounted() {
            this.getTreeList()
        },
        methods: {
            //树列表
            getTreeList() {
                treeList().then(res => {
                    if (res.code == 200) {
                        this.treeData = res.data
                        if (res.data.length) {
                            const id = this.treeData[0].id
                            this.groupName = id
                            this.$emit('getId', id)
                        }
                    }
                })
            },
            onChange(value) {
                this.$emit('getId', value === undefined ? "" : value)
            }
        },
    };
</script>

<style lang="less" scoped>
    ::v-deep .ant-select-selection--single{
        height: 28px;
        .ant-select-selection__rendered{
            line-height: 28px;
        }
    }
    .ant-select-open , .ant-select-focused ::v-deep .ant-select-selection{
        box-shadow: none;
    }
</style>